import React from 'react'
import {Col, Row,Select,Checkbox} from "antd";

import {WeaLocaleProvider,WeaInput,WeaBrowser, WeaFormItem, WeaInputNumber, WeaSearchGroup, WeaSelect} from "ecCom";
import EField_New from "../../../portal/elements/components/common/setting_new/content/base/EField_New";
const getLabel = WeaLocaleProvider.getLabel;

export default class AddExtends extends React.Component{

    state = {
        showFieldComponentVisible:false,
    }

    componentWillMount(){
        const {setSetting,setId} = this.props
        if(setId == -1){
            setSetting({
                searchText:'',
                searchArea:'0',
                searchType:'0',
                searchWay:'0',
            })
        }
    }



    render(){
        const {data,setting,setSetting} = this.props
        const {showFields=[]} = data
        const {searchText,showField=[],searchArea,searchType,searchWay} = setting

        const searchAreas = [{
            key: "0",
            selected: true,
            showname: getLabel(19670, '标题中'),
        },{
            key: "1",
            selected: false,
            showname: getLabel(19671, '内容中'),
        }]

        const searchTypes = [{
            key: "0",
            selected: true,
            showname: 'and',
        },{
            key: "1",
            selected: false,
            showname: 'or',
        }]

        const searchWays = [{
            key: "0",
            selected: true,
            showname: getLabel(108, '客户端'),
        },{
            key: "1",
            selected: false,
            showname: getLabel(15038, '服务器'),
        }]


        let showFieldComponent = <div></div>
        const {showFieldComponentVisible} = this.state
        if (showFieldComponentVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(showFields),
                eFieldNewUsedKeys: _.cloneDeep(showField),
                onOk: (data) => {
                    setSetting({
                        /* eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),*/
                        showField: _.cloneDeep(data.eFieldNewUsedKeys),

                    });
                    this.setState(function(state,props){
                        return {
                            showFieldComponentVisible:false
                        }
                    })
                },
                onCancel: () => {
                    this.setState({
                        showFieldComponentVisible: false
                    });
                }
            };
            showFieldComponent = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@75dll3`} {...eFieldNewProps}/>
        }
        const showFieldSelectedNames = [];
        for (let i = 0; i < showField.length; i++) {
            for (let j = 0 ; j < showFields.length; j++) {
                if (showField[i] == showFields[j].key) {
                    showFieldSelectedNames.push(showFields[j].name);
                }
            }
        }

        return (
            <div>
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lgsgjm`}  type="flex" align="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zgl7g4`} span={6} >
                            <div>{getLabel(33958, '显示内容')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wemolt`} span={18}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zc0xzx`} value={searchText} viewAttr={2} onChange={value => setSetting({searchText: value})}/>
                        </Col>
                    </Row>
                </div>
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d2x0ap`}  type="flex" align="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3vww2e`} span={6} >
                            <div>{getLabel(19495, '显示字段')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ntg4yw`} span={18}>
                            {showFieldComponent}
                            <div style={{height: '100%', lineHeight: '23px'}}>
                                <i className="icon-coms-Flow-setting portal-esetting-btn"
                                   style={{position: "relative", zIndex: "12",top:5}}
                                   onClick={() => this.setState({showFieldComponentVisible: true})}/>
                                <div
                                    title={showFieldSelectedNames.join('，')} style={{marginTop:-18,"-webkit-line-clamp": 2,
                                    "-webkit-box-orient": "vertical",    "cursor": "pointer"}}>&nbsp;&nbsp;&nbsp;&nbsp;{showFieldSelectedNames.join('，')}</div>
                            </div>

                        </Col>
                    </Row>
                </div>
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4u54un`}  type="flex" align="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@nst5vv`} span={6} >
                            <div>{getLabel(19669, '所在位置')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ytuo3x`} span={18}>
                            <div>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@qoar10`}
                                    options={searchAreas}
                                    value={searchArea}
                                    detailtype={3}
                                    onChange={(v,showname)=>{
                                        setSetting({searchArea:v})
                                    }}
                                />
                            </div>

                        </Col>
                    </Row>
                </div>
                <div style={{'margin-top':'10px'}}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0nwz7o`}  type="flex" align="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6vvjqn`} span={6} >
                            <div>{getLabel(24020, '查询组合')} :</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ujj1lt`} span={18}>
                            <div>
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@6wixzd`}
                                    options={searchTypes}
                                    value={searchType}
                                    detailtype={3}
                                    onChange={(v,showname)=>{
                                        setSetting({searchType:v})
                                    }}
                                />
                            </div>

                        </Col>
                    </Row>
                </div>
                {/*<div style={{'margin-top':'10px'}}>*/}
                    {/*<Row>*/}
                        {/*<Col span={6} >*/}
                            {/*<div>{getLabel(24661, '读取方式')} :</div>*/}
                        {/*</Col>*/}
                        {/*<Col span={18}>*/}
                            {/*<div>*/}
                                {/*<WeaSelect*/}
                                    {/*options={searchWays}*/}
                                    {/*value={searchWay}*/}
                                    {/*detailtype={3}*/}
                                    {/*onChange={(v,showname)=>{*/}
                                        {/*setSetting({searchWay:v})*/}
                                    {/*}}*/}
                                {/*/>*/}
                            {/*</div>*/}

                        {/*</Col>*/}
                    {/*</Row>*/}
                {/*</div>*/}
            </div>
        )
    }
}